<template>
  <div class="search">
    <Modal v-model="show" title="选择图片" :width="70" footer-hide>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="60"
          class="search-form"
        >
          <Form-item label="关键字" prop="keyword">
            <Input
              type="text"
              v-model="searchForm.keyword"
              placeholder="请输入关键字"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
        </Form>
      </Row>
      <Row style="margin-top: 10px">
        <Col span="12">
          <Upload
            type="drag"
            ref="upload"
            multiple
            action
            :max-size="2 * 1024"
            :show-upload-list="false"
            :before-upload="beforeUpload"
            accept=".jpg, .jpeg, .png"
            :format="['jpg', 'jpeg', 'png']"
            style="width: max-content; display: inline-block"
          >
            <Button type="error">上传文件</Button>
          </Upload>
        </Col>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        sortable="custom"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Modal>
  </div>
</template>

<script>
import * as API_Pather from "@/api/pather.js";
export default {
  props: {
    value: { type: Boolean, default: false },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set() {
        this.$emit("on-close", false);
      },
    },
  },
  data() {
    return {
      loading: false, // 加载状态
      searchForm: {
        keyword: "", //关键字
        pageNumber: 1,
        pageSize: 10,
      },
      columns: [
        { title: "原始文件名", key: "name", align: "center" },
        { title: "存储文件名", key: "fileKey", align: "center" },
        {
          title: "缩略图",
          align: "center",
          render: (h, params) => {
            return h("img", {
              attrs: { src: params.row.url },
              style: { width: "100px" },
            });
          },
        },
        { title: "文件类型", width: 150, key: "fileType", align: "center" },
        {
          title: "文件大小",
          width: 150,
          align: "center",
          render: (h, params) => {
            let size = (parseInt(params.row.fileSize) / 1024).toFixed(2);
            return h("span", {}, size + "KB");
          },
        },
        { title: "上传者", key: "createBy", align: "center" },
        { title: "上传时间", key: "createTime", align: "center" },
        {
          title: "操作",
          align: "center",
          width: 150,
          fixed: "right",
          render: (h, params) => {
            return h("div", { style: { display: "flex", justifyContent: "center" } }, [
              this.btnDom(h, null, "选择", "handleCheck", params),
            ]);
          },
        },
      ], //表格字段
      data: [], // 数据列表
      total: 0, // 表单数据总数
    };
  },
  watch: {
    show(val) {
      if (val) {
        this.checkId = null;
        this.getData();
      }
    },
  },
  methods: {
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getData();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.searchForm.pageNumber = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getData();
    },
    // 自定义上传
    beforeUpload(file) {
      let typeList = [".jpg", ".jpeg", ".png"];
      if (!typeList.some((i) => file.name.lastIndexOf(i) != -1)) {
        this.$Message.warning("请检查上传文件格式");
        return;
      }
      if (file.size / 1024 > 2 * 1024) {
        this.$Message.warning("图片大小不能超过2MB");
        return;
      }
      const formData = new FormData();
      formData.append("file", file);
      API_Pather.postUploadBanner(formData).then((res) => {
        if (res.success) {
          this.$Message.warning("上传成功");
          this.getData();
        }
      });
      return false;
    },
    // 按钮
    btnDom(h, type = null, label = "", method, params, ghost = false) {
      return h(
        "Button",
        {
          props: { type, size: "small", ghost },
          style: { marginRight: "5px" },
          on: {
            click: () => {
              this[method](params.row);
            },
          },
        },
        label
      );
    },
    // 选择
    handleCheck(row) {
      this.$emit("on-save", row.url);
    },
    // 获取图片列表
    getData() {
      this.loading = true;
      API_Pather.getImageList(this.searchForm)
        .then((res) => {
          if (res.success) {
            this.data = res.result.records;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.modal-info {
  height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  .ivu-row {
    min-height: 60px;
    height: auto;
  }
  .box-border {
    min-height: 60px;
    width: 80%;
    height: auto;
  }
}
</style>
